<template>
  <div id="EditGroupAccount">
    <div class="left count">
      <div class="count_top">
        <span style="margin-right: 10px">我的账套</span>
        <el-input v-model="accountName" @input="searchAccount" placeholder="搜索账套名称"></el-input>
        <el-button type="primary" round @click="searchAccount">搜 索</el-button>
      </div>
      <!-- accountCode: "001"
            accountName: "测试账套2"
            accountid: "984e5471-f821-439e-8f79-df99a1fdba2d"
            companyid: "25260629-522c-455c-81fa-40fbb7bf6ea6"
            createTime: "2021-07-13T11:51:20"
            currentYm: null
            groupid: null
            id: 1 -->
      <ul class="ulList">
        <li v-for="(item, index) in AccountList" :key="item.id" v-show="item.isShow">
          <div class="text" :title="item.accountCode + '  ' + item.accountName">{{ item.accountCode }} {{ item.accountName }}</div>
          <i class="iconfont" @click="addAccountItem(index)">&#xe632;</i>
        </li>
      </ul>
    </div>
    <div class="centre count">
      <!-- 添加
       <i class="iconfont">&#xe648;</i> -->
      <el-button icon="el-icon-arrow-left"></el-button>
      <el-button><i class="el-icon-arrow-right el-icon--right"></i></el-button>
    </div>
    <div class="right count">
      <div class="count_top">
        <span>合并账套</span>
        <span style="float: right">
          <span style="font-size: 13px">
            已选择 <span class="redColorFont">{{ addAccountList.length }}</span> 套账套</span
          >
          <el-button type="primary" round @click="saveConfirm">保 存</el-button>
          <el-button type="primary" round @click="$router.push({ name: 'GroupAccounts', query: { isEdit: false } })">返 回</el-button>
        </span>
      </div>
      <ul class="ulList">
        <li v-for="(item, index) in addAccountList" :key="item.id">
          <div class="text" :title="item.accountCode + '  ' + item.accountName">{{ item.accountCode }} {{ item.accountName }}</div>
          <i class="iconfont" @click="deleteAccountItem(item, index)">×</i>
        </li>
      </ul>
    </div>
    <!-- 合并账套名称 -->
    <el-dialog :close-on-click-modal="false" width="430px" custom-class="groupNameClass" title="合并账套" :visible.sync="IsNewgroupname">
      <div style="padding: 20px 20px 40px">
        <div style="margin-bottom: 20px">
          <span>合并账套名称: </span>
          <el-input v-model.trim="groupName" style="width: 230px" placeholder="请输入合并账套名称" maxlength="20"></el-input>
        </div>
        <div style="margin-bottom: 20px">
          <span>账套会计制度: </span>
          <el-select v-model="accountingSystemId" style="width: 230px" placeholder="请选择会计制度">
            <el-option v-for="item in codePreSets" v-show="item.isShow" :key="item.id" :label="item.systemName" :value="item.id"></el-option>
          </el-select>
        </div>
        <div>
          <span style="float: left; margin-right: 5px">可见人员: </span>
          <el-checkbox-group v-model="VisiblePersonnel" style="display: inline-block;width：285px;">
            <el-checkbox v-for="item in userList" :label="`${item.userid}_${item.subid}`" :key="item.userid">{{ item.realName }}</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="isConfirmLoading" @click="affirmAdd">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "EditGroupAccount",
  data() {
    return {
      accountName: "", // 搜索的账套名称
      AccountList: [],
      // CopyAccountList:[],
      addAccountList: [],
      IsNewgroupname: false,
      groupName: "", // 合并账套名称
      sqlType: 1, // 1 新增 2 修改
      ismap: true,
      isConfirmLoading: false,
      queryObj: "",
      accountingSystemId: "", // 合并账套会计制度
      codePreSets: [],
      VisiblePersonnel: [], // 可见人员
      isSeek: false,
      randomNum: "",
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.common.userInfo,
      userList: (state) => state.common.userList,
    }),
  },
  methods: {
    // setMyaccount() {
    //   if(this.isSeek) {
    //     this.isSeek = false;
    //     this.searchAccount();
    //   }
    //   setTimeout(()=>{
    //     this.isSeek = true;
    //   }, 500);
    // },
    searchAccount() {
      // 搜索账套
      this.AccountList.map((item) => {
        item.isShow = true;
        this.addAccountList.map((it) => {
          if (item.accountid == it.accountid) {
            item.isShow = false;
          }
        });
      });
      if (this.accountName) {
        // this.CopyAccountList=[]
        this.AccountList.map((item) => {
          if (item.accountName?.indexOf(this.accountName) != -1 || item.accountCode?.indexOf(this.accountName) != -1) {
            // this.CopyAccountList.push(item)
            if (item.isShow) {
              item.isShow = true;
            }
          } else {
            item.isShow = false;
          }
        });
      }
    },
    getAccountList() {
      // 账套列表
      this.$api.bloc.GetVisibleAccountList().then((res) => {
        let resData = res.data.data;
        resData.map((item) => {
          item.isShow = true;
        });
        this.AccountList = resData;
        this.setAccountList();
      });
    },

    addAccountItem(index) {
      this.addAccountList.push(this.AccountList[index]);
      this.AccountList[index].isShow = false;
    },

    deleteAccountItem(item, index) {
      this.addAccountList.splice(index, 1);
      this.AccountList.map((i) => {
        if (item.accountid == i.accountid) {
          i.isShow = true;
          return;
        }
      });
    },

    saveConfirm() {
      // 保存
      if (this.addAccountList.length < 2) {
        this.$message({ message: "请选择两个及以上的账套", type: "warning" });
        return;
      }
      let zdIDs = [];
      this.addAccountList.map((item) => {
        zdIDs.push(item.accountingSystemId);
      });
      let zdID = Array.from(new Set(zdIDs));
      if (zdID.length > 1) {
        this.$confirm("存在不同会计的账套进行合并，会影响到报表合并数据，是否继续？", "系统提示", {
          confirmButtonText: "继续",
          cancelButtonText: "取消",
          type: "success",
        })
          .then(() => {
            this.setIsNewgroup(zdIDs);
          })
          .catch(() => {});
      } else {
        this.setIsNewgroup(zdIDs);
      }
    },

    setIsNewgroup(zdIDs) {
      this.codePreSets.map((item) => {
        item.isShow = false;
        this.addAccountList.map((it) => {
          if (item.id == it.accountingSystemId) {
            item.isShow = true;
          }
        });
      });

      if (this.sqlType == 1) {
        // 新增时默认第一个账套的会计制度
        this.accountingSystemId = zdIDs[0];
      } else {
        this.codePreSets.map((item) => {
          if (this.accountingSystemId == item.id) {
            if (!item.isShow) {
              this.accountingSystemId = "";
            }
          }
        });
      }
      this.IsNewgroupname = true;
    },

    removeLIst() {
      this.addAccountList = [];
      this.VisiblePersonnel = [];
      this.groupName = "";
      this.accountingSystemId = "";
    },

    affirmAdd() {
      // 确认名称新建集团账套
      if (!this.groupName) {
        this.$message({ message: "请输入集团账套名称", type: "warning" });
        return;
      }
      if (!this.accountingSystemId) {
        this.$message({ message: "请选择会计制度", type: "warning" });
        return;
      }
      if (this.VisiblePersonnel.length == 0) {
        this.$message({ message: "请选择可见人员", type: "warning" });
        return;
      }
      let LIst = JSON.parse(JSON.stringify(this.addAccountList));
      LIst.map((item) => {
        delete item.isShow;
        delete item.id;
      });
      let params = {
        groupName: this.groupName,
        accountList: LIst,
        visibleUserList: [],
      };
      // this.userList.map((item) => {
      this.VisiblePersonnel.map((obj) => {
        // if (item.userid == obj) {
        const ids = obj.split("_");
        params.visibleUserList.push({
          userid: ids[0],
          subid: ids[1],
        });
        // }
      });
      // });
      if (this.sqlType == 2) {
        params.id = this.queryObj.row.id;
        params.groupid = this.queryObj.row.groupid;
      } else {
        params.companyid = this.userInfo.CompanyId;
      }
      params.accountingSystemId = this.accountingSystemId;
      this.isConfirmLoading = true;
      this.$api.bloc
        .EditGroup(params, this.sqlType)
        .then((res) => {
          if (res.data.status == 200) {
            this.IsNewgroupname = false;
            this.$message({ message: `${this.sqlType == 1 ? "新增" : "修改"}成功`, type: "success" });
            this.$router.push({ name: "GroupAccounts", query: { isEdit: true } });
            this.removeLIst();
          }
          this.isConfirmLoading = false;
        })
        .catch(() => {
          this.isConfirmLoading = false;
        });
    },

    setAccountList() {
      if (this.addAccountList.length != 0) {
        this.AccountList.map((item) => {
          this.addAccountList.map((it) => {
            if (item.accountid == it.accountid) {
              item.isShow = false;
            }
          });
        });
      }
    },

    initialize() {
      this.queryObj = this.$route.query;
      this.sqlType = this.queryObj.isEdit;
      if (this.sqlType == 2) {
        if (this.queryObj.row === "[object Object]") {
          this.queryObj.row = JSON.parse(sessionStorage.getItem("GroupAccounts_row_obj"));
        }
        this.addAccountList = this.queryObj.row.accountList;
        this.groupName = this.queryObj.row.groupName;
        this.accountingSystemId = this.queryObj.row.accountingSystemId;
        let visibleUserList = this.queryObj.row.visibleUserList;
        if (visibleUserList && visibleUserList.length != 0) {
          this.VisiblePersonnel = [];
          visibleUserList.map((item) => {
            this.VisiblePersonnel.push(`${item.userid}_${item.subid}`);
          });
        }
      } else if (this.sqlType == 1) {
        this.removeLIst();
      }
      this.getAccountList();
    },
  },
  mounted() {
    this.$api.accountPort.GetSelectSystemList().then((res) => {
      let resData = [];
      res.data.data.map((item) => {
        if (this.userInfo.smallType == 3) {
          if (item.systemName != "小企业会计准则(2013智能做账)") {
            resData.push(item);
          }
        } else {
          resData.push(item);
        }
      });
      this.codePreSets = resData;
    });
  },
  activated() {
    if (this.$route.query.randomNum) {
      if (this.randomNum == "") {
        // 第一次创建
        this.randomNum = this.$route.query.randomNum;
        this.initialize();
      } else if (this.randomNum == this.$route.query.randomNum) {
        // 仅仅是切换过来
        return false;
      } else if (this.randomNum !== this.$route.query.randomNum) {
        // 又进行了其他操作
        this.randomNum = this.$route.query.randomNum;
        this.initialize();
      }
    } else {
      return;
    }
  },
};
</script>

<style lang="less">
#EditGroupAccount {
  width: 100%;
  padding: 45px 70px;
  .count {
    display: inline-block;
    width: 42.5%;
    height: 99%;
    box-shadow: #e7eaed 0px 0px 8px 0px;
    float: left;
    .el-input {
      width: 180px;
      .el-input__inner {
        background-color: #f7f8fc;
      }
    }
    .el-button {
      width: 70px;
      margin-left: 10px;
    }
    .count_top {
      height: 55px;
      line-height: 55px;
      background-color: #f7f8fc;
      padding: 0 20px;
    }
    .ulList {
      width: 100%;
      height: calc(100% - 55px);
      overflow-y: auto;
      padding-top: 10px;
      li {
        height: 40px;
        line-height: 40px;
        padding: 0 10px 0 20px;
        font-size: 13px;
        color: #606060;
        cursor: pointer;
        &:hover {
          background-color: #f7f8fc;
        }
        .text {
          width: calc(100% - 30px) !important;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: inline-block;
        }
        .iconfont {
          width: 20px;
          float: right;
          cursor: pointer;
          &:hover {
            color: #5c8ffc;
          }
        }
      }
    }
  }
  .centre {
    width: 15%;
    box-shadow: none;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #6092fb;
    font-size: 16px;
    font-weight: 600;
    .iconfont {
      font-size: 18px;
      margin-left: 13px;
    }
  }
  .left {
  }
  .right {
    .iconfont {
      font-size: 20px;
      color: #f56c6c;
      &:hover {
        color: red !important;
      }
    }
  }
}

.groupNameClass {
  .el-dialog__body {
    padding: 0;
    .el-checkbox-group {
      display: inline-block;
      max-height: 435px;
      overflow: auto;
    }
  }
  .el-dialog__footer {
    .el-button {
      width: 100px;
      text-align: center;
      border-radius: 50px;
    }
  }
}

@media screen and (min-width: 0) and (max-width: 1367px) {
  .groupNameClass {
    .el-dialog__body {
      .el-checkbox-group {
        display: inline-block;
        max-height: 220px;
        overflow: auto;
      }
    }
  }
}
</style>
